{include file='public/head2'}
<div id="main-page">
    <div class="p-3 bg-white wap"><form id="Form">
        <div class="loader">
          <svg class="circular" viewBox="25 25 50 50">
            <circle class="path" cx="50" cy="50" r="20" fill="none" stroke-width="2" stroke-miterlimit="10"></circle>
          </svg>
        </div>
        
        <div class="card br-10 mb-3" style="height:0.94rem;">
            <div class="circle1" style="top:-0.7rem;"></div>
            <div class="circle2" style="bottom:-1.7rem;"></div>
            <div class="content tac" style="line-height:0.94rem;">
                <h2>{$title}</h2>
            </div>
        </div>
        
        <h2 class="fc-light py-3">|&nbsp;&nbsp;基础设置</h2>

        <div class="row form-box">
            <div class="col-3"><span class="fc-red">*</span> 视频标题</div>
            <div class="col-9">
                <input type="text" name="data[title]" value="{$video['alivideo']['title']}" class="form-input-bg" data-verify="required" data-title="视频标题">
            </div>
            <div class="form-box-bottom"></div>
        </div>
        <div class="row form-box">
            <div class="col-3"><span class="fc-red">*</span> 视频数量</div>
            <div class="col-9">
                <input type="number" name="data[num]" value="{$video['alivideo']['num']?$video['alivideo']['num']:1}" class="form-input-bg" data-verify="required" data-title="视频数量">
                <p style="color:#FF5722;font-size:0.22rem;line-height:1.2em;">生成的视频数量，最多20个。</p>
            </div>
            <div class="form-box-bottom"></div>
        </div>
        <div class="row form-box">
            <div class="col-3"><span class="fc-red">*</span> 视频宽度</div>
            <div class="col-9">
                <input type="number" name="data[width]" value="{$video['alivideo']['width']?$video['alivideo']['width']:720}" class="form-input-bg" data-verify="required" data-title="视频宽度">
            </div>
            <div class="form-box-bottom"></div>
        </div>
        <div class="row form-box">
            <div class="col-3"><span class="fc-red">*</span> 视频高度</div>
            <div class="col-9">
                <input type="number" name="data[height]" value="{$video['alivideo']['height']?$video['alivideo']['height']:1280}" class="form-input-bg" data-verify="required" data-title="视频高度">
            </div>
            <div class="form-box-bottom"></div>
        </div>
        <div class="row form-box">
            <div class="col-3"><span class="fc-red">*</span> 视频时长</div>
            <div class="col-4">
                <input type="number" name="data[min]" value="{$video['alivideo']['min']?$video['alivideo']['min']:20}" class="form-input-bg" data-verify="required" data-title="视频时长">
            </div>
            <div class="col-1">
                ~
            </div>
            <div class="col-4">
                <input type="number" name="data[max]" value="{$video['alivideo']['max']?$video['alivideo']['max']:30}" class="form-input-bg" data-verify="required" data-title="视频时长">
            </div>
            <div class="col-3"></div>
            <div class="col-9">
              <p style="color:#777;font-size:0.22rem;line-height:1.2em;">生成视频的时长范围，单位：秒</p>
            </div>
            <div class="form-box-bottom"></div>
        </div>

        <h2 class="fc-light py-3 mediah2">|&nbsp;&nbsp;视频素材</small></h2>
        {if isset($video['alivideo']['media'])}
        <div class="p-2 bg-light br-10 border mb-2 fs-25 fc-orange">
          已上传：{:count($video['alivideo']['media'])}个素材，待生成视频：{$video['alivideo']['num']}个。若要重新生成视频，请等待视频生成完成后，再操作！
        </div>
        {/if}
        {foreach $video['alivideo']['media'] as $idx=>$item}
        <div class="p-2 bg-light br-10 border mb-2 mediabox">
          <div class="row form-box">
              <div class="col-3">素材<span class="medianum">{$idx+1}</span></div>
              <div class="col-9">
                  <input type="text" name="data[media][][path]" value="{$item['path']}" class="form-input-bg mediapath" data-verify="" data-title="素材{php echo $idx+1}" disabled>
              </div>
              <div class="form-box-bottom"></div>
          </div>
          <div class="row form-box">
              <div class="col-4">
                <button type="button" class="btn btn-block btn-golden uploadmedia" data-idx="{$idx}">上传素材</button>
              </div>
              <div class="col-4">
                <a href="#" target="_blank" class="btn btn-block mediaview">查看素材</a>
              </div>
              <div class="col-4">
                <button type="button" class="btn btn-block btn-red delmedia" data-idx="{$idx}">删除素材</button>
              </div>
              <div class="form-box-bottom"></div>
          </div>
        </div>
        {/foreach}
        <input type="file" name="mediaupload" id="mediaupload" data-idx="" value="" style="display:none;">

        <div class="row form-box">
            <div class="col-1"></div>
            <div class="col-10"><button type="button" class="btn btn-block addmedia">添加素材</button></div>
            <div class="col-1"></div>
            <div class="form-box-bottom"></div>
        </div>

        <div class="row form-box">
            <div class="col-6">
                <button type="button" class="cancel" onclick="window.history.go(-1)">取消</button>
            </div>
            <div class="col-6">
                <button type="button" class="submit" id="createsale">提交</button>
            </div>
            <div class="form-box-bottom"></div>
        </div></form>
    </div>
    <style>
        #imgbox .col-6 {padding-bottom: 0.2rem;}
        #imgbox .imgbox {width: 100%; height: 1.2rem; padding-bottom: 100%; display: inline-block; position: relative;}
        #imgbox img,.btn-img img {width: 100%; height: 100%; overflow: hidden; object-fit: cover; position: absolute; top: 0; left: 0; border-radius: 0.1rem;}
        .form-box {line-height:0.6rem; font-size:0.26rem;}
        .form-input-bg {border: 1px solid #a0a0a0; float:left;}
        .form-box-bottom {clear:both; padding: 0.15rem;}
        .col-9 {position: relative;}
        .form-left {position:absolute; top:0; left:0.15rem; background-color:#d2d2d2; width:0.8rem; height:0.6rem; border: 1px solid #a0a0a0; border-radius:0.1rem 0 0 0.1rem; text-align:center;}
        .form-right {position:absolute; top:0; right:0.15rem; background-color:#d2d2d2; width:0.8rem; height:0.6rem; border: 1px solid #a0a0a0; border-radius:0 0.1rem 0.1rem 0; text-align:center;}
        .cancel, .submit{
            display: inline-block;
            width: 1.4rem;
            height: 1.4rem;
            line-height: 1.4rem;
            border: 0;
            color: #333;
            text-align: center;
            font-size: 0.34rem;
            border-radius: 0.7rem;
            outline:none;
        }
        .cancel{
            background-color: #ff6464;
            float: right;
            margin-right: 0.3rem;
        }
        .submit{
            background-color: #ffd700;
            float: left;
            margin-left: 0.3rem;
        }
    </style>
    <script type="text/javascript">
        $(function(){
            var is_submit = true;
            var mediaidx = $('.mediabox').length;
            mediaidx = mediaidx?mediaidx-1:0;
            $('.wap').on('click', '.uploadmedia', function(){
              if(is_submit){
                $('#mediaupload').data('idx', $(this).data('idx')).click();
              }
            });
            $('#mediaupload').on('change', function(){
              if(is_submit){
                is_submit = false;
                $('.loader').show();
                var idx = $(this).data('idx');
                var formData = new FormData();
                formData.append('file',$(this)[0].files[0]);
                $.ajax({
                    url:"{$_W['baseurl']}/common/upfile/media",
                    type:'POST',
                    data: formData,
                    contentType: false,
                    processData: false,
                    success:function(res){
                      if(res.code == 0){
                        $('.mediabox:eq('+idx+')').find('.mediapath').val('/upload/'+res.data.key);
                        $('.mediabox:eq('+idx+')').find('.mediaview').attr('href','/upload/'+res.data.key);
                      }else{
                        dialog(res.msg);
                      }
                      $('.loader').hide();
                      is_submit = true;
                    },
                    error: function(data) {
                      dialog('上传失败！');
                      $('.loader').hide();
                      is_submit = true;
                    }
                });
              }
            });
            $('.wap').on('click', '.delmedia', function(){
              $('.mediabox:eq('+$(this).data('idx')+')').remove();
              var i=0;
              $('.delmedia').each(function(){
                $(this).attr('data-idx', i);
                i++;
              });
              i=0;
              $('.uploadmedia').each(function(){
                $(this).attr('data-idx', i);
                i++;
              });
              i=1;
              $('.medianum').each(function(){
                $(this).text(i);
                i++;
              });
              i=1;
              $('.mediapath').each(function(){
                $(this).attr('data-title', '素材'+i);
                i++;
              });
              mediaidx = $('.mediabox').length;
              mediaidx = mediaidx?mediaidx-1:0;
            });
            $('.addmedia').on('click', function(){
              var obj = '';
              if($('.mediabox').length>0){
                mediaidx++;
                obj = $('.mediabox:last');
              }else{
                obj = $('.mediah2');
              }
              var htmldata = '<div class="p-2 bg-light br-10 border mb-2 mediabox">'+
                                '<div class="row form-box">'+
                                    '<div class="col-3">素材<span class="medianum">'+(mediaidx+1)+'</span></div>'+
                                    '<div class="col-9">'+
                                        '<input type="text" name="data[media][][path]" value="" class="form-input-bg mediapath" data-verify="" data-title="素材'+(mediaidx+1)+'" disabled>'+
                                    '</div>'+
                                    '<div class="form-box-bottom"></div>'+
                                '</div>'+
                                '<div class="row form-box">'+
                                    '<div class="col-4">'+
                                      '<button type="button" class="btn btn-block btn-golden uploadmedia" data-idx="'+mediaidx+'">上传素材</button>'+
                                    '</div>'+
                                    '<div class="col-4">'+
                                      '<a href="#" target="_blank" class="btn btn-block mediaview">查看素材</a>'+
                                    '</div>'+
                                    '<div class="col-4">'+
                                      '<button type="button" class="btn btn-block btn-red delmedia" data-idx="'+mediaidx+'">删除素材</button>'+
                                    '</div>'+
                                    '<div class="form-box-bottom"></div>'+
                                '</div>'+
                              '</div>';
              obj.after(htmldata);
            });

            var issubmit = true;
            $('#createsale').on('click', function(){
                if(issubmit){
                    $('.mediapath').attr('disabled', false);
                    var formData = {};
                    var t = $('#Form').serializeArray();
                    $('.mediapath').attr('disabled', true);
                    // console.log(t);return false;
                    var errname = '';
                    var idx = {};
                    $.each(t, function() {
                        if($("input[name='"+this.name+"']").data('verify')=='required' && this.value==''){
                            errname = this.name;
                        }
                        if(this.name.indexOf('[]') == -1){
                          formData[this.name] = this.value;
                        }else{
                          if(idx[this.name]){
                            idx[this.name]++;
                          }else{
                            idx[this.name] = 1;
                          }
                          formData[this.name.replace('[]','['+(idx[this.name]-1)+']')] = this.value;
                        }
                    });
                    if(errname != ''){
                        alert("“"+$("input[name='"+errname+"']").data('title')+'”不能为空！');
                        return false;
                    }
                    // console.log('sssssssssssssssssssssssssssssssss');
                    // console.log(formData);
                    // return false;

                    issubmit = false;
                    $('.loader').show();
                    $.post("{$_W['baseurl']}/index/merch/createvideo?id={$_GPC['id']}",formData,function(ret){
                        issubmit = true;
                        $('.loader').hide();
                        dialog(ret.msg);
                        setTimeout(function(){
                            if(ret.code==0){
                                window.history.go(-1);
                            }
                        }, 2000);
                    });
                }
            });
        });
    </script>
</div>
{include file='public/footer'}